<template>
    <div class="comment-box">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要吐槽的内容(最多100字)" maxlength="100" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
        <div class="comment-list" v-for="(item,i) in contentList" :key="item.time">
            <div class="comment-title">第{{i+1}}楼用户&nbsp;&nbsp;{{item.name}}&nbsp;&nbsp;发表时间:{{item.time}}</div>
            <div class="comment-body">{{item.content}}</div>
        </div>
        <mt-button type="danger" size="large" plain>加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
    data(){
        return {
            msg:'',
            contentList:[
                {name:'张三',time:'2019.1.10',content:'哈哈哈'},
                {name:'李四',time:'2019.1.11',content:'嘎嘎嘎'},
                {name:'王二麻子',time:'2019.1.12',content:'啦啦啦'},
                {name:'赵武',time:'2019.1.13',content:'呵呵呵'},
                {name:'刘茂',time:'2019.1.14',content:'嘻嘻嘻'},
                {name:'徐旭',time:'2019.1.15',content:'咣咣咣'}
            ]
        }
    },
    methods:{
        postComment(){
            var info = {
                name:'匿名用户',time:Date.now(),content:this.msg
            }
            if(this.msg.trim()==0){
                Toast('输入的内容不能为空!');
            }else{
                this.contentList.unshift(info)
                this.msg = ''
            }

        }
    }
}
</script>

<style lang="less" scoped>
.comment-box{
    margin-top: 5px;
    h3{
        font-size: 20px;
    }
    textarea{
        margin: 0;
        font-size: 13px;
    }
    .comment-list{
        font-size: 12px;
        margin: 5px 0;
        .comment-title{
            background-color: #ccc;
            padding: 2px;
        }
        .comment-body{
            text-indent: 2em;
        }
    }
}
</style>

